<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="box" @tap="goToPage(`/pages/template/video-player/index?url=${videoSrc}`)">
			<image style="filter: brightness(80%);" :style="{'border-radius':'5px',width:width+'px',height:height+'px'}"
				mode="center" :src="imgSrc" @error="errorHandle" @load="loadHandle">
			</image>
			<view class="video-play-icon"></view>
		</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<video :id="'videoWrap'" :style="{'border-radius':'5px',width:width+'px',height:height+'px'}" :src="videoSrc"
			:controls="false" :muted="true" @play="playHandle">
			<cover-view class="mask" @tap.stop.provent="goToPage(`/pages/template/video-player/index?url=${videoSrc}`)">
			</cover-view>
		</video>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			imgSrc: {
				type: String,
				default: './images/none.png'
			},
			videoSrc: {
				type: String,
				default: ''
			},
			vWidth: {
				type: Number,
				default: 0
			},
			vHeight: {
				type: Number,
				default: 0
			},
			duration: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				maxWidth: 170,
				maxHeight: 170,
				width: 0,
				height: 0,
				context: null
			}
		},
		beforeMount() {
			this.context = uni.createVideoContext('videoWrap', this);
			this.formatWH(this.vWidth, this.vHeight)
		},
		methods: {
			errorHandle() {
				this.src = './images/picFail.png';
			},
			loadHandle(e) {
				this.formatWH(e.detail.width, e.detail.height)
			},
			playHandle(e) {
				console.log('============');
				this.context.pause()
				this.context.seek(-1)
			},
			formatWH(width, height) {
				let wRadio = this.maxWidth / width
				let hRadio = this.maxHeight / height
				let radio = wRadio < hRadio ? wRadio : hRadio
				this.width = Math.floor(width * radio)
				this.height = Math.floor(height * radio)
			},
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
	}

	.video-play-icon {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		border-radius: 20rpx;
		background: url(./images/play.png) no-repeat center;
		background-size: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// margin: -20rpx;
	}

	.mask {
		position: relative;
		width: 100%;
		height: 100%;
	}
</style>
